<!DOCTYPE html>
<html lang="en">

<!-- Head tag -->
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Description-->
    
        <meta name="description" content="BOM  DOM自定义属性值  getAttribute(属性的名字)  setAttribute(“属性名字”,”值”)removeAttribute(属性)三个方法不仅可以操作元素的自定义属性及值,还可以操作元素自带的属性操作类名 className=’’  removeAttribute(‘c">
    

    <!--Author-->
    
        <meta name="author" content="John Doe">
    

    <!--Open Graph Title-->
    
        <meta property="og:title" content="BOM  DOM"/>
    

    <!--Open Graph Description-->
    

    <!--Open Graph Site Name-->
    <meta property="og:site_name" content="Hexo"/>

    <!--Type page-->
    
        <meta property="og:type" content="article" />
    

    <!--Page Cover-->
    

        <meta name="twitter:card" content="summary" />
    

    <!-- Title -->
    
    <title>BOM  DOM - Hexo</title>

    <!-- Bootstrap Core CSS -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/style.css">

    <!-- Custom Fonts -->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
    <link href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Gallery -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.css" type="text/css" rel="stylesheet" />

    <!-- Google Analytics -->
    


    <!-- favicon -->
    
	
</head>


<body>

    <!-- Menu -->
    <!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">逐风</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                
                    <li>
                        <a href="/">
                            
                                Home
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="/archives">
                            
                                Archives
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="/tags">
                            
                                Tags
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="/categories">
                            
                                Categories
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="https://github.com/klugjo/hexo-theme-clean-blog">
                            
                                <i class="fa fa-github fa-stack-2x"></i>
                            
                        </a>
                    </li>
                
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

    <!-- Main Content -->
    <!-- Page Header -->
<!-- Set your background image for this header in your post front-matter: cover -->

<header class="intro-header" style="background-image: url('http://www.codeblocq.com/assets/projects/hexo-theme-clean-blog/img/home-bg.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="post-heading">
                    <h1>BOM  DOM</h1>
                    
                    <span class="meta">
                        <!-- Date and Author -->
                        
                        
                            2016-09-08
                        
                    </span>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Post Content -->
<article>
    <div class="container">
        <div class="row">

            <!-- Tags and categories -->
           

            <!-- Gallery -->
            

            <!-- Post Main Content -->
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <p>BOM  DOM<br>自定义属性值  getAttribute(属性的名字)  setAttribute(“属性名字”,”值”)<br>removeAttribute(属性)三个方法不仅可以操作元素的自定义属性及值,还可以操作元素自带的属性<br>操作类名 className=’’  removeAttribute(‘class’)<br>.cloneNode(true) 克隆节点<br>选择器   &gt;&gt;&gt;&gt;&gt;<br>父级元素.appendChild(<br>动态 创建元素:</p>
<pre><code>* 1. document.write(&quot;标签代码及内容&quot;);
* 2. 对象.innerHTML=&quot;标签代码及内容&quot;;
* 3. document.createElement(&quot;标签的名字&quot;);
</code></pre><p>设置该标签中的内容  document.title=”哭了哇宇宙中心迪斯噶”;<br>location.href=””;//跳转页面的<br>location.replace(“<a href="http://www.baidu.com&quot;);//没有后退的,替换当前的页面" target="_blank" rel="external">http://www.baidu.com&quot;);//没有后退的,替换当前的页面</a>  用于小广告？<br>location.reload();//刷新</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"> //封装的是获取页面向上或者向左卷曲出去的距离的值</div><div class="line">1</div><div class="line">  function getScrollTop() &#123;</div><div class="line">    return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0;</div><div class="line">  &#125;</div><div class="line">  function getScrollLeft() &#123;</div><div class="line">    return window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0;</div><div class="line">  &#125;</div><div class="line">  </div><div class="line">  2</div><div class="line">  function getScroll() &#123;</div><div class="line">    return &#123;</div><div class="line">      top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0,</div><div class="line">      left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0</div><div class="line">    &#125;;</div><div class="line">  &#125;</div></pre></td></tr></table></figure>
<p>  //谷歌和火狐都支持 事件参数对象—e<br>    //低版本的火狐是不支持window.event的<br>    //谷歌是支持window.event的<br>     //window.event   IE的<br>    e=window.event||e;</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div></pre></td><td class="code"><pre><div class="line">var evtTools=&#123;</div><div class="line">   //该函数的返回值是一个事件参数对象</div><div class="line">   getEvent:function (e) &#123;</div><div class="line">     return window.event||e;</div><div class="line">   &#125;,</div><div class="line">   //获取的是相对于页面可视区域的横坐标</div><div class="line">   getClientX:function (e) &#123;</div><div class="line">     return this.getEvent(e).clientX;</div><div class="line">   &#125;,</div><div class="line">   //获取的是相对于页面可视区域的纵坐标</div><div class="line">   getClientY:function (e) &#123;</div><div class="line">     return this.getEvent(e).clientY;</div><div class="line">   &#125;,</div><div class="line">   //获取的是向左卷曲出去的横坐标---相对于页面</div><div class="line">   getScrollLeft:function () &#123;</div><div class="line">     return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;</div><div class="line">   &#125;,</div><div class="line">   //获取的是向上卷曲出去的纵坐标---相对于页面</div><div class="line">   getScrollTop:function () &#123;</div><div class="line">     return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;</div><div class="line">   &#125;,</div><div class="line">   //获取的是相对于页面的横坐标----(卷曲出去的横坐标+可视区域的横坐标)</div><div class="line">   getPageX:function (e) &#123;</div><div class="line">     return this.getEvent(e).pageX?this.getEvent(e).pageX:this.getScrollLeft()+this.getClientX(e);</div><div class="line">   &#125;,</div><div class="line">   //获取的是相对于页面的纵坐标----(卷曲出去的纵坐标+可视区域的纵坐标)</div><div class="line">   getPageY:function (e) &#123;</div><div class="line">     return this.getEvent(e).pageY?this.getEvent(e).pageY:this.getScrollTop()+this.getClientY(e);</div><div class="line">   &#125;</div><div class="line"> &#125;;</div></pre></td></tr></table></figure>
<ul>
<li>addEventListener—谷歌支持,火狐支持,IE11支持,IE8不支持  addEventListener()</li>
<li>参数有三个</li>
<li>1,事件的类型(事件的名字)</li>
<li>2,事件处理函数(匿名函数,命名函数)</li>
<li>3,false<br>解绑  removeEventListener   detachEvent<br>attachEvent()  谷歌不支持,火狐也不支持,IE8支持的,….IE11不支持</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line">//为元素绑定多个相同的事件--兼容代码</div><div class="line">  function addEventListener(element,type,fn) &#123;</div><div class="line">    if(element.addEventListener)&#123;</div><div class="line">      element.addEventListener(type,fn,false);</div><div class="line">    &#125;else if(element.attachEvent)&#123;</div><div class="line">      element.attachEvent(&quot;on&quot;+type,fn);</div><div class="line">    &#125;else&#123;</div><div class="line">      element[&quot;on&quot;+type]=fn;</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">	</div><div class="line"> //为元素解绑事件的兼容代码---元素,--事件名字--对应的事件处理函数的名字</div><div class="line">function removeEventListener(element,type,fn) &#123;</div><div class="line">  if(element.removeEventListener)&#123;</div><div class="line">    element.removeEventListener(type,fn,false);</div><div class="line">  &#125;else if(element.detachEvent)&#123;</div><div class="line">    element.detachEvent(&quot;on&quot;+type,fn);</div><div class="line">  &#125;else&#123;</div><div class="line">    element[&quot;on&quot;+type]=null;</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>阻止事件冒泡:<br>  //window.event.cancelBubble=true或者是e.stopPropagation();</p>
<p> 创建正则表达式对象<br>//    var reg=new RegExp()<br>  test() 方法用于检测一个字符串是否匹配某个模式.返回true/false<br>  字符串中有的方法是可以使用正则表达式作为参数使用的</p>


                
            </div>

            <!-- Comments -->
            
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    


                </div>
            
        </div>
    </div>
</article>

    <!-- Footer -->
    <hr />

<!-- Footer -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <ul class="list-inline text-center">
                    

                    

                    
                        <li>
                            <a href="https://github.com/klugjo/hexo-theme-clean-blog" target="_blank">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-github fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
                    

                    

                    

                    
                </ul>
                <p class="copyright text-muted">&copy; 2018 John Doe<br></p>
                <p class="copyright text-muted">Original Theme <a target="_blank" href="http://startbootstrap.com/template-overviews/clean-blog/">Clean Blog</a> from <a href="http://startbootstrap.com/" target="_blank">Start Bootstrap</a></p>
                <p class="copyright text-muted">Adapted for <a target="_blank" href="https://hexo.io/">Hexo</a> by <a href="http://www.codeblocq.com/" target="_blank">Jonathan Klughertz</a></p>
            </div>
        </div>
    </div>
</footer>


    <!-- After footer scripts -->
    
<!-- jQuery -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

<!-- Bootstrap -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- Gallery -->
<script src="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

<!-- Disqus Comments -->



</body>

</html>